
<template>
  <div id="editperson">
    <!-- <h1 style="margin-top:0">{{this.$route.params.id}}</h1> -->
    <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
      <el-tab-pane label="基本信息" name="first">
        <router-view></router-view>
      </el-tab-pane>
      <el-tab-pane label="下属单位/部门" name="third">
        <el-table :data="dept" highlight-current-row v-loading="deptlistLoading" style="width: 100%;">
          <el-table-column type="index" label="序号" width="50">
          </el-table-column>
          <el-table-column prop="Name" label="名称">
          </el-table-column>
          <el-table-column prop="deptClass" label="类型" width="100">
          </el-table-column>
          <el-table-column label="操作" width="250">
            <template slot-scope="scope">
              <el-button size="small" @click="deptEdit(scope.row.Id)" type="primary">修改</el-button>
              <el-button size="small" @click="deptDel(scope.row.Id)" type="danger">删除</el-button>
              <el-button size="small" icon="el-icon-arrow-up" circle @click="deptOrder(scope.row.Id,1)" type="success"></el-button>
              <el-button size="small" icon="el-icon-arrow-down" circle @click="deptOrder(scope.row.Id,-1)" type="success"></el-button>
            </template>
          </el-table-column>
        </el-table>
          <div style="clear:both; display:block;margin:20px;">
            <el-button @click.native="adddept" type="primary">新增</el-button>
          </div>
        <!--新增编制界面-->
        <el-dialog title="新增下属单位/部门信息" :visible.sync="adddeptFormVisible" >
          <el-form :model="adddeptForm" label-width="80px" :rules="adddeptFormRules" ref="adddeptForm">
              <el-input v-model="adddeptForm.parentDeptid" style="display:none" auto-complete="off"></el-input>
            <el-form-item label="名称" prop="Name">
              <el-input v-model="adddeptForm.Name" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="类型" prop="deptClass">
              <el-radio v-model="adddeptForm.deptClass" label="1">分类</el-radio>
              <el-radio v-model="adddeptForm.deptClass" label="2">单位</el-radio>
              <el-radio v-model="adddeptForm.deptClass" label="3">部门</el-radio>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click.native="adddeptFormVisible = false">取消</el-button>
            <el-button type="primary" @click.native="adddeptSubmit" :loading="adddeptLoading">提交</el-button>
          </div>
        </el-dialog>
        <!--修改编制界面-->
        <el-dialog title="修改编制信息" :visible.sync="editdeptFormVisible" >
          <el-form :model="editdeptForm" label-width="80px" :rules="editdeptFormRules" ref="editdeptForm">
            <el-form-item label="名称" prop="Name">
              <el-input v-model="editdeptForm.Name" auto-complete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click.native="editdeptFormVisible = false">取消</el-button>
            <el-button type="primary" @click.native="editdeptFormSubmit" :loading="editdeptFormLoading">修改</el-button>
          </div>
        </el-dialog>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      activeName: 'first',
      editLoading: false,
      dept: [],
      adddeptForm: {},
      adddeptFormLoading: false,
      adddeptLoading: false,
      adddeptFormVisible: false,
      adddeptFormRules: {
        Name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        deptClass: [{ required: true, message: '请选择类型', trigger: 'blur' }]
      },
      editdeptForm: {},
      editdeptFormLoading: false,
      editdeptFormVisible: false,
      editdeptFormRules: {
        Name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
      }
    }
  },
  methods: {
    getdept () {
      let para = {
        id: this.$route.params.id
      }
      var _this = this
      this.deptlistLoading = true
      this.$http
        .post(`/dept`, para)
        .then(function (response) {
          console.log(para)
          _this.deptlistLoading = false
          if (response.data.IsSuccess === true) {
            console.log('获取成功')
            _this.dept = response.data.Result
          } else {
            console.log('获取失败:' + response.data.Msg)
            _this.$message({
              message: '获取失败:' + response.data.Msg,
              type: 'error'
            })
          }
        })
        .catch(function (error) {
          console.log(error)
          _this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    deptEdit: function (id) {
      this.editdeptFormVisible = true
      this.getdeptDetail(id)
    },
    getdeptDetail: function (id) {
      let para = {
        id: id
      }
      var _this = this
      this.deptDetailLoading = true
      this.$http
        .post(`/dept/details`, para)
        .then(function (response) {
          console.log(para)
          _this.deptDetailLoading = false
          if (response.data.IsSuccess === true) {
            console.log('获取成功')
            _this.editdeptForm = response.data.Result
          } else {
            console.log('获取失败:' + response.data.Msg)
            _this.$message({
              message: '获取失败:' + response.data.Msg,
              type: 'error'
            })
          }
        })
        .catch(function (error) {
          console.log(error)
          _this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    adddept: function () {
      console.log('parentid' + this.$route.params.id)
      this.adddeptFormVisible = true
      this.adddeptForm = {
        Name: '',
        deptClass: '',
        parentDeptid: this.$route.params.id
      }
    },
    deptDel: function (id) {
      this.$confirm('确认删除该单位吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.deptlistLoading = true
        let para = { id: id }
        this.$http.post(`/dept/delete`, para).then((response) => {
          this.deptlistLoading = false
          if (response.data.IsSuccess === true) {
            console.log('删除成功')
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.$emit('refreshTree')
          } else {
            console.log('删除失败:' + response.data.Msg)
            this.$message({
              message: '删除失败:' + response.data.Msg,
              type: 'error'
            })
          }
          this.getJiating()
        })
      }).catch(() => {
      })
    },
    // 新增单位提交
    adddeptSubmit: function () {
      var _this = this
      this.$refs.adddeptForm.validate((valid) => {
        if (valid) {
          _this.adddeptLoading = true
          let para = {
            Name: this.adddeptForm.Name,
            deptClass: this.adddeptForm.deptClass,
            parentid: this.$route.params.id
          }
          this.$http.post(`/dept/add`, para).then(function (response) {
            console.log(response.data.IsSuccess)
            if (response.data.IsSuccess === true) {
              _this.adddeptLoading = false
              _this.$message({
                message: '提交成功',
                type: 'success'
              })
              this.$emit('refreshTree')
            } else {
              console.log('提交失败:' + response.data.Msg)
              _this.$message({
                message: '提交失败:' + response.data.Msg,
                type: 'error'
              })
            }
            _this.$refs['adddeptForm'].resetFields()
            _this.adddeptFormVisible = false
            _this.getdept()
          }).catch(function (error) {
            console.log(error)
            _this.$message({
              message: '获取失败:' + error,
              type: 'error'
            })
          })
        }
      })
    },
    // 修改单位提交
    editdeptFormSubmit: function () {
      var _this = this
      this.$refs.editdeptForm.validate((valid) => {
        if (valid) {
          _this.editdeptFormLoading = true
          let para = {
            Name: this.adddeptForm.Name,
            Id: this.editdeptForm.Id
          }
          this.$http.post(`/dept/edit`, para).then(function (response) {
            console.log(response.data.IsSuccess)
            if (response.data.IsSuccess === true) {
              _this.editdeptFormLoading = false
              _this.$message({
                message: '提交成功',
                type: 'success'
              })
              this.$emit('refreshTree')
            } else {
              console.log('提交失败:' + response.data.Msg)
              _this.$message({
                message: '提交失败:' + response.data.Msg,
                type: 'error'
              })
            }
            _this.$refs['editdeptForm'].resetFields()
            _this.editdeptFormVisible = false
            _this.getdept()
          }).catch(function (error) {
            console.log(error)
            _this.$message({
              message: '获取失败:' + error,
              type: 'error'
            })
          })
        }
      })
    },
    // 修改下属单位顺序
    deptOrder: function (id, ordernum) {
      var _this = this
      let para = {
        OrderNum: ordernum,
        Id: id
      }
      this.$http.post(`/dept/order`, para).then(function (response) {
        console.log(response.data.IsSuccess)
        if (response.data.IsSuccess === true) {
          _this.editdeptFormLoading = false
          _this.$message({
            message: '提交成功',
            type: 'success'
          })
          this.$emit('refreshTree')
        } else {
          console.log('提交失败:' + response.data.Msg)
          _this.$message({
            message: '提交失败:' + response.data.Msg,
            type: 'error'
          })
        }
        _this.getdept()
      }).catch(function (error) {
        console.log(error)
        _this.$message({
          message: '获取失败:' + error,
          type: 'error'
        })
      })
    },
    handleClick (tab, event) {
      console.log(tab, event)
    }
  },
  mounted () {
    this.getdept()
  }
}
</script>
